<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .box1{width:300px;height: 300px;background: red;overflow: hidden;}
    .box2{width:200px;height: 200px;background: green;overflow: hidden;margin: 50px;}
    .box3{width:100px;height: 100px;background: blue;overflow: hidden;margin: 50px;}
  </style>
</head>
<body>
  <div class="box1">
    <div class="box2">
      <div class="box3"></div>
    </div>
  </div>
</body>
<script>

  var box1 = document.querySelector(".box1")
  var box2 = document.querySelector(".box2")
  var box3 = document.querySelector(".box3")

  // 默认的事件流阶段为：冒泡阶段
  box1.onclick = function(){
    alert("red")
  }
  box2.onclick = function(eve){
    var e = eve || window.event;

    stopBubble(e);

    alert("green")
  }
  box3.onclick = function(eve){
    var e = eve || window.event;

    // 正常：e.stopPropagation();
    // IE低版本：e.cancelBubble = true;

    stopBubble(e);

    alert("blue")
  }
  // document.body.onclick = function(){
  //   alert("body")
  // }
  // document.documentElement.onclick = function(){
  //   alert("html")
  // }
  // document.onclick = function(){
  //   alert("document")
  // }


  // 阻止事件冒泡的兼容封装
  function stopBubble(e){
    if( e.stopPropagation ){
      e.stopPropagation();
    }else{
      e.cancelBubble = true;
    }
  }


  // ========

  // box1.addEventListener("click", function(){
  //   alert("冒泡的red")
  // }, false);
  // box1.addEventListener("click", function(){
  //   alert("捕获的red")
  // }, true);

  // box2.addEventListener("click", function(){
  //   alert("冒泡的green")
  // }, false);
  // box2.addEventListener("click", function(){
  //   alert("捕获的green")
  // }, true);

  // box3.addEventListener("click", function(){
  //   alert("冒泡的blue")
  // }, false);
  // box3.addEventListener("click", function(){
  //   alert("捕获的blue")
  // }, true);
  
</script>
</html>